<script setup>
    import { getCurrentInstance, onMounted, ref } from 'vue';
    import { computedPlayTime } from '../../tools/play'
    const axios = getCurrentInstance().proxy.$http;



    const playList = ref({});
    onMounted(async () => {
        try{
            const { data: { data: { profile: { userId } } } } = await axios.get('/login/status');
            const { data } = await axios.get(`/user/playlist?uid=${userId}`);
            if(data.code !== 200) return
            playList.value = data.playlist;
            playList.value.forEach((value, index) => {
                if(!index) {
                    value.className = 'active';
                } else {
                    value.className = '';
                }
            })

            // 调用第一个
            toggle(0, playList.value[0].id)
        }catch(err) {
            console.log(err);
        }
    })


    const songs = ref({});
    const toggle = debounce(async (...args) => {
        let index = args[0];
        let id = args[1]
        songs.value = '';
        playList.value.forEach((item, i) => {
            if(index === i) {
                item.className = 'active';
            } else {
                item.className = '';
            }
        })
        const { data } = await axios.get(`/playlist/track/all?id=${id}`);
        if(data.code !== 200) return 
        songs.value = data.songs;
        console.log(data.songs)
    })



    
    function debounce(callback, delay=500) {
        let timeId = null;
        return function(...args) {
            if(timeId) clearTimeout(timeId)
            timeId = setTimeout(() => {
                callback.call(this, ...args); 
            }, delay)
        }
    }

    const admin = debounce(async (...args) => {
        console.log(args);
    })

    admin(123, 455)





</script>

<template>
    <UserHeader></UserHeader>
    <main>
        <article>
            <p>创建歌单({{playList.length}})</p>
            <ul>
                <li 
                    v-for="(item, index) of playList"
                    :class="item.className"
                    @click="toggle(index, item.id)"
                >
                    <img :src="item.coverImgUrl">
                    <div class="right">
                        <span>{{item.name}}</span>
                        <span>{{item.trackCount}}首</span>
                    </div>
                </li>
            </ul>
        </article> 
        <aside>
            <Loading v-show="!songs"></Loading>
            <ul v-show="songs">
                <header>
                    <span></span>
                    <span>歌曲标题</span>
                    <span>时长</span>
                    <span>歌手</span>
                    <span>专辑</span>
                </header>
                <li v-for="(item, index) of songs">
                    <span>
                        <i>{{index + 1}}</i>
                        <PlayBtn class="play" :id="item.id"></PlayBtn>
                        <Add class="add" :id="item.id" :name="item.name" :singerList="item.ar" :duration="item.dt"></Add>
                    </span>
                    <span>{{item.name}}</span>
                    <span>{{computedPlayTime(item.dt)}}</span>
                    <span>
                        <template v-for="(value, index) of item.ar">
                            <i v-show="index != 0"> / </i>
                            <i>{{value.name}}</i>
                        </template>
                    </span>
                    <span>{{item.al.name}}</span>
                </li>
            </ul>
        </aside>
    </main> 
    <UserFooter></UserFooter>
</template>


<style lang="less" scoped>
    main{
        width: 980px;
        height: 500px;
        display: grid;
        grid-template-columns: 250px 1fr;
        margin: 0 auto;
        article{
            border: 1px solid #eee;
            p{
                text-align: center;
                font-size: 20px;
                margin: 30px 0px 20px 0px;
            }
            ul{
                li{
                    padding: 5px 10px;
                    height: 50px;
                    display: grid;
                    grid-template-columns: 50px 1fr;
                    gap: 10px;
                    cursor: pointer;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .right{
                        display: grid;
                        grid-template-rows: repeat(2, 1fr);
                        span{
                            display: grid;
                            place-content: center start;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow:ellipsis;
                            font-size: 10px;
                        }
                    }
                }
                .active{
                    background-color: #eee;
                }
            }
        }
        aside{
            border-right: 1px solid #eee;
            padding: 30px;
            background-clip: content-box;
            header{
                display: grid;
                grid-template-columns: 100px 1fr 80px 150px 150px;
                place-content: center;
                height: 35px;
                border: 1px solid #ddd;
                background: linear-gradient(to right, #964b4b #471111);
                font-size: 13px;
                span{
                    display: block;
                    width: 100%;
                    height: 35px;
                    border-right: 1px solid #eee;
                    line-height: 35px;
                    text-indent: 15px;
                }
            }
            li{
                height: 30px;
                display: grid;
                grid-template-columns: 100px 1fr 80px 150px 150px;
                font-size: 12px;
                line-height: 30px;
                text-indent: 15px;
                &:nth-child(2n) {
                    background-color: #f7f7f7;
                }
                span{
                    &:first-child{
                        position: relative;
                        i{
                            position: absolute;
                            right: 75%;
                            font-style: normal;
                        }
                        .play{
                            position: absolute;
                            left: 35%;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        .add{
                            position: absolute;    
                            left: 65%;
                            top: 50%;
                            transform: translateY(-50%);
                        }

                    }
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap; 
                }
            }
        }
    }
</style>